import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  TouchableOpacity,ScrollView,Modal,Dimensions
} from 'react-native';
const {height, width} = Dimensions.get('window');
import Toast, {DURATION} from 'react-native-easy-toast';
import {jumpPage} from '../../common/common';
import BackButton from '../../component/BackButton';
export default class NewhandGuide extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'新手指引',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      
    })
  }

  _cellPress(title,type){
    jumpPage(this.props.navigation,'useGuide',{title: title, type});
  }
  render(){
    let {userInfo} = this.state;
    const viewStyle = {
      paddingLeft:10,
      paddingRight:10,
      backgroundColor:'white'
    }
    const textTitle={
      fontSize:18,
      color:'black',
      paddingTop:10,
      paddingBottom:10
    }
    const row = {
      flexDirection:'row',
      alignItems:'flex-start',
      backgroundColor:'#f0f0f0'
    }
    const btn = {
      paddingTop:5,
      paddingBottom:5,
      paddingLeft:10,
      paddingRight:10,
      
    }
    const text={
      fontSize:18
    }
    return(
      <View style={{flex:1}}> 
        <View style={row}> 
          <TouchableOpacity style={[row,btn]}>
            <Text style={text}>A</Text><Text>+</Text>
            </TouchableOpacity>
          <TouchableOpacity style={[row,btn]}>
            <Text style={text}>A</Text><Text>-</Text>
            </TouchableOpacity>
        </View>
        <ScrollView style={styles.container}>
          <View style={viewStyle}>
            <Text style={textTitle}>常见问题解答</Text>
            <TouchText text='如何删除图片？' press={()=>this._cellPress('如何删除图片-新手指南','c1')}/>
            <TouchText text='如何更换背景音乐？' press={()=>this._cellPress('如何更换背景音乐-新手指南','c2')}/>
            <TouchText text='如何删除背景音乐？' press={()=>this._cellPress('如何删除背景音乐-新手指南','c3')}/>
            <TouchText text='如何购买VIP会员？'/>
            <TouchText text='如何创建新模板？'/>
            <TouchText text='如何收藏喜欢的素材？'/>
            <TouchText text='如何？'/>
            <TouchText text='如何去除水印？'/>
            <View style={{height:50}}></View>
          </View>
          <View style={{height:10,backgroundColor:'#f0f0f0'}}></View>
          <View style={viewStyle}>
            <Text style={textTitle}>动画工场APP教程</Text>
            <TouchText text='模板页面的使用指南。'  press={()=>this._cellPress('模板页使用指南-新手指南','t1')}/>
            <TouchText text='编辑界面的介绍。'/>
            <TouchText text='编辑界面文字工具使用指南。' press={()=>this._cellPress('如何更改文字-新手指南','t3')}/>
            <TouchText text='编辑界面图片工具使用指南。' press={()=>this._cellPress('如何更改图片-新手指南','t4')}/>
            <TouchText text='编辑界面音乐工具使用指南。'/>
            <TouchText text='编辑界面镜头工具使用指南。'/>
            
            <TouchText text='如何保存草稿？'/>
            <TouchText text='如何预览视频？'/>
            <TouchText text='如何添加配音？'/>
            <TouchText text='如何合成视频？'/>
            <TouchText text='如何去水印、去广告？'/>
            <TouchText text='如何分享、下载视频？'/>
            <View style={{height:50}}></View>
          </View>
          <Toast ref="toast" position='bottom' positionValue={200} />

        </ScrollView>
      </View>
    )
  }
}
class TouchText extends Component{
  render(){
    const textStyle = {
      color:'#2596FF',
      paddingTop:5,
      paddingBottom:5
    }
    return(
      <TouchableOpacity onPress={this.props.press}>
        <Text style={textStyle}>{this.props.text}</Text>
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({ 
  center: {
    justifyContent:'center',
    alignItems:'center'
  },
  container: {
    flex: 1,
    backgroundColor:'#f0f0f0',
  },
})